<template>
  <div class="absolute-layout-data-form">
    <Form :label-width="120">
      <FormItem label="背景色">
        <PnColorPicker size="small" v-model="backgroundColor" alpha recommend/>
        <Checkbox v-model="syncSetPageBgColor">是否同步设置为页面背景色</Checkbox>
      </FormItem>
      <FormItem label="画布宽度 (px)">
        <Tooltip content="当值为0时，在设计器内画布宽度强制设置为100%，可以设置具体像素值，此属性不会影响页面预览和发布后的效果（预览和发布状态下，画布宽度将恢复100%）" placement="left" :max-width="200">
          <InputNumber size="small" :max="100000" :min="0" v-model="canvasWidth" :active-change="false"></InputNumber> px
        </Tooltip>
      </FormItem>

      <FormItem label="栅格列数">
        <InputNumber size="small" :max="24" :min="0" v-model="colNum" :active-change="false"></InputNumber>
      </FormItem>
      <FormItem label="每行的高度">
        <InputNumber size="small" :max="100000" :min="0" v-model="rowHeight" :active-change="false"></InputNumber> px
      </FormItem>
      <FormItem label="允许最大行数">
        <InputNumber size="small" :max="10000" :min="0" v-model="maxRows" :active-change="false"></InputNumber>
      </FormItem>
      <FormItemPanel title="栅格元素间距">
        <FormItem label="横向间距">
          <InputNumber size="small" :max="10000" :min="0" v-model="marginHorizontal" :active-change="false"></InputNumber> px
        </FormItem>
        <FormItem label="纵向间距">
          <InputNumber size="small" :max="10000" :min="0" v-model="marginVertical" :active-change="false"></InputNumber> px
        </FormItem>
      </FormItemPanel>

      <FormItem label="开启响应式">
        <Tooltip content="开启后，预览和发布状态下，页面内的组件将会自动根据设备尺寸的宽度进行响应式适配（注意：此响应式适配对于拖动调整浏览器窗口尺寸时图表类组件可能存在不能实时适配的问题，需要刷新页面使其适配）" :max-width="200" placement="left">
          <i-switch size="small" v-model="responsive"></i-switch>
        </Tooltip>
      </FormItem>
      <FormItem label="隐藏顶部加载进度条">
        <Tooltip content="打开后，页面在发布后，将不会在页面顶部显示页面中所有数据请求的加载时进度条" max-width="200" placement="left">
          <i-switch size="small" v-model="hideHttpLoadingBar"></i-switch>
        </Tooltip>
      </FormItem>


      <FormItemPanel title="背景图片">
        <UploadImageButton v-model="imageRelativePath" :page-id="$PnUtil.getUrlParam('page_id')"></UploadImageButton>

        <FormItem label="相对路径">
          <i-input size="small" v-model="imageRelativePath">
            <Button slot="append" icon="md-close" @click="imageRelativePath = ''"></Button>
          </i-input>
        </FormItem>
        <FormItem label="背景重复">
          <Select :transfer="true" size="small" v-model="imageRepeat">
            <Option v-for="item in $PnDict.backgroundRepeats" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="背景图尺寸">
          <Input size="small" v-model="imageSize" placeholder="参考CSS的background-size"/>
        </FormItem>
      </FormItemPanel>
    </Form>
  </div>
</template>

<script>
import { createHelpers } from 'vuex-map-fields';

const { mapFields } = createHelpers({
  getterType: 'designer/getField',
  mutationType: 'designer/updateField',
});
export default {
  name: "ReactiveLayoutConfigDataForm",
  props: {},
  data() {
    return {}
  },
  mounted() {

  },
  methods: {},
  computed: {
    ...mapFields({
      pageMetadata: 'pageMetadata',

      canvasWidth: 'pageMetadata.layout.layoutConfigData.canvasWidth',
      colNum: 'pageMetadata.layout.layoutConfigData.colNum',
      rowHeight: 'pageMetadata.layout.layoutConfigData.rowHeight',
      maxRows: 'pageMetadata.layout.layoutConfigData.maxRows',
      marginHorizontal: 'pageMetadata.layout.layoutConfigData.marginHorizontal',
      marginVertical: 'pageMetadata.layout.layoutConfigData.marginVertical',
      isDraggable: 'pageMetadata.layout.layoutConfigData.isDraggable',
      isResizable: 'pageMetadata.layout.layoutConfigData.isResizable',
      isMirrored: 'pageMetadata.layout.layoutConfigData.isMirrored',
      autoSize: 'pageMetadata.layout.layoutConfigData.autoSize',
      verticalCompact: 'pageMetadata.layout.layoutConfigData.verticalCompact',
      preventCollision: 'pageMetadata.layout.layoutConfigData.preventCollision',
      useCssTransforms: 'pageMetadata.layout.layoutConfigData.useCssTransforms',
      responsive: 'pageMetadata.layout.layoutConfigData.responsive',

      backgroundColor: 'pageMetadata.layout.layoutConfigData.backgroundColor',
      syncSetPageBgColor: 'pageMetadata.layout.layoutConfigData.syncSetPageBgColor',

      imageRelativePath: 'pageMetadata.layout.layoutConfigData.imageRelativePath',
      imageRepeat: 'pageMetadata.layout.layoutConfigData.imageRepeat',
      imageSize: 'pageMetadata.layout.layoutConfigData.imageSize',

      customStyleCode: 'pageMetadata.layout.layoutConfigData.customStyleCode',
      pageScalingMode: 'pageMetadata.layout.layoutConfigData.pageScalingMode',

      hideHttpLoadingBar: 'pageMetadata.layout.layoutConfigData.hideHttpLoadingBar',
    })
  }
}
</script>

<style scoped>
.ivu-form-item {
  margin-bottom: 0px;
}
</style>
